<template>
  <div class="booking-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <h2 style="margin-left: 20vw">故宫门票预订</h2>
      </div>
      <br>
      <el-form :model="orderForm">
        <el-form-item label="门票类型">
          <el-select v-model="orderForm.ticketType" placeholder="请选择门票类型">
            <el-option
                v-for="item in ticketTypes"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <br>
        <el-form-item label="数量:">
          <el-input-number v-model="orderForm.quantity" :min="1" :max="10" label="数量"></el-input-number>
        </el-form-item>
        <br>
        <el-form-item>
          <el-button type="primary" @click="placeOrder" style="margin-left: 20vw">&nbsp;&nbsp;下单&nbsp;&nbsp;</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import axios from "axios";
import ip from "@/router/ip.js";
import {ElMessage} from "element-plus";

export default {
  name: 'TicketBooking',
  data() {
    return {
      orderForm: {
        ticketType: '',
        quantity: 1
      },
      ticketTypes: [
        { value: '成人票', label: '成人票' },
        { value: '学生票', label: '学生票' },
        { value: '老年票', label: '老年票' }
      ]
    };
  },
  methods: {
    async placeOrder() {
      if(this.orderForm.ticketType===''){
        ElMessage.error(
            "请先填写门票类型内容"
        )
      }

    let username=  JSON.parse(localStorage.getItem("user")).username
      console.log(username)
      await axios.get(ip+"add_pay",{
        params:{
          ticketType:this.orderForm.ticketType,
          quantity:this.orderForm.quantity,
          username:username,
        }
      })


      ElMessage.success(
          `您已成功预订 ${this.orderForm.quantity} 张 ${this.ticketTypes.find(t => t.value === this.orderForm.ticketType).label}！`
      )
    },

  }
}
</script>

<style scoped>
.booking-container {
  margin: 20px;
}

.box-card {
  border-radius: 10px;
}

.el-form-item {
  margin-bottom: 20px;
}

</style>